<template>
    <div class="out_box">
        <headers />

        <div class="content_box">
            <div class="content_case">
                <div class="form_box">
                    <v-form direction="horizontal">
                        <v-form-item class="border" :label="$t('coin_haha.exchange.label[0]')" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <span class="ant-form-text bold"><span class="primary">1000</span> / 1000 Haha</span>
                            <span class="raise_the_amount primary ml_40 pointer" @click="jumpHashRate()">{{ $t('coin_haha.exchange.raise_the_amount') }}</span>
                        </v-form-item>
                        <v-form-item class="border" :label="$t('coin_haha.exchange.label[1]')" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <span class="ant-form-text bold">120 USDT ≈ 1000 Haha</span>
                        </v-form-item>
                        <v-form-item class="border" :label="$t('coin_haha.exchange.label[2]')" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <span class="ant-form-text count_date">71:59:59</span>
                        </v-form-item>
                        <v-form-item class="bold" :label="$t('coin_haha.exchange.label[3]')" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <v-input class="exchange" :placeholder="$t('coin_haha.exchange.exchange')" v-model="dataForm.number"></v-input>
                        </v-form-item>
                        <v-form-item class="bold" :label="$t('coin_haha.exchange.label[4]')" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <span class="ant-form-text money" id="userName" name="userName">{{ money }}</span>
                            <span class="tips" id="userName" name="userName">USD / USDT</span>
                        </v-form-item>
                    </v-form>
                    <div class="save_box">
                        <v-button class="btn btn1" type="primary" size="large" @click="pushData()">{{ $t('coin_haha.exchange.btn[0]') }}</v-button>
                        <v-button class="btn btn2" size="large" @click="$router.back(-1)">{{ $t('coin_haha.exchange.btn[1]') }}</v-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="tips_box">
            <h4 class="font_gray">{{ $t('coin_haha.exchange.tips.title') }}</h4>
            <p class="text">{{ $t('coin_haha.exchange.tips.content') }}</p>
        </div>
        <div class="coin_payment none">
            <form id="coin_payment" action="https://www.coinpayments.net/index.php" method="post">
                <input type="hidden" name="cmd" value="_pay_simple">
                <input type="hidden" name="reset" value="1">
                <input type="hidden" name="merchant" value="711d0eb67ba70bc9453048906c27b944">
                <input type="hidden" name="item_name" value="笑脸矿业云算力套餐">
                <input type="hidden" name="item_desc" value="GRINOK- 笑脸 矿业">
                <input type="hidden" name="currency" value="USD">
                <input type="hidden" name="amountf" value="00.00">
                <input type="hidden" name="want_shipping" value="0">
                <input type="hidden" name="invoice" value="">
                <input type="hidden" name="success_url" value="http://www.grinok.com/#/hash_rate">
                <input type="hidden" name="cancel_url" value="http://www.grinok.com/#/hash_rate">
                <input type="hidden" name="ipn_url" value="http://www.grinok.com/apis/convertAudit-grinok/convertaudit/automaticSystemAudit">
                <input type="image" src="https://www.coinpayments.net/images/pub/buynow-small-black2.png" alt="现在就购买CoinPayments.net">
            </form>
        </div>
    </div>
</template>

<script>
    import Headers from '@components/header/header.vue';
    import { submitExchange } from '@doapis/orders/coin_haha.js';

    export default {
        name: "Exchange",
        components: {
            Headers
        },
        data: function() {
            return {
                dataForm: {
                    payMoney: 0,
                    number: ''
                },
                labelCol: {
                    span: 6
                },
                wrapperCol: {
                    span: 14
                },
            }
        },
        computed: {
            userDATA: function() {
                const userDATA = this.$store.state.userDATA;
                return userDATA;
            },
            money: function() {
                let dataForm = this.dataForm;
                return dataForm.number && dataForm.number ? $.$numberAddComma(dataForm.number * dataForm.proportion) : '0.00';
            }
        },
        methods: {
            pushData: function() {
                const that = this;
                let dataForm = that.dataForm;
                let tipsText = ''

                if (!dataForm.number || dataForm.number < 100 || dataForm.number % 100 > 0) {
                    tipsText = '您的兑换数量必须100的整数倍！！';
                } else if (dataForm.number > 1000) {
                    tipsText = '您的兑换数量不能大于您的额度！！';
                }

                if (tipsText) {
                    that.$notification.error({
                        message: '操作错误！！',
                        description: tipsText,
                    });
                } else {
                    const orderId = $.$createOrder();
                    submitExchange({
                        cnumber: dataForm.number,
                        proportion: dataForm.proportion,
                        payMoney: that.money,
                        memberid: that.userDATA.memberid,
                        orderId: orderId,
                        item_number: 'hahaOrder'
                    }).then(function(res) {
                        if (res.success) {
                            $.showLoad('body');
                            let payment_form = $('#coin_payment');
                            payment_form.find('[name="amountf"]').val(that.money);
                            payment_form.find('[name="invoice"]').val(orderId);
                            payment_form.submit();
                        }
                    });
                }
            },
            jumpHashRate: function() {
                this.$router.push({ path: '/hash_rate'});
            }
        },
        mounted: function() {
            const query = this.$route.query;
            this.dataForm.id = query.id;
            this.dataForm.proportion = query.proportion;
        }
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';

    .content_box{
        background-color: white;
    }
    .content_case{
        .content_spacing;
        background-color: white;
        padding-bottom: 2px;
        /deep/ label{
            font-size: 14px;
            color: #999;
            vertical-align: text-bottom;
        }
        /deep/ .ant-form-item{
            padding: 30px 0;
            margin-bottom: 0;
            font-size: 13px;
            color: #333;
            &.border{
                border-bottom: 1px solid #efeff4;
            }
            &.bold label{
                font-size: 18px;
                color: #333;
            }
        }
        /deep/ .ant-form-item-label{
            width: 22%;
            padding-left: 50px;
            text-align: left;
        }
        .primary{
            color: @theme_color;
        }
        .count_date{
            color: @color_orange;
        }
        .raise_the_amount{
            font-size: 10px;
            padding: 2px 9px;
            border: 1px solid #DDD;
            border-radius: 34px;
        }
        .exchange{
            width: 300px;
            box-sizing: content-box;
        }
        .save_box{
            margin: 20px 0 40px 22%;
            padding-left: 50px;
            .btn{
                height: 36px;
                text-align: center;
                box-sizing: border-box;
            }
            .btn1{
                width: 180px;
                .orange_linear_ellipsis_btn;
            }
            .btn2{
                width: 130px;
                margin-left: 40px;
                .gray_ellipsis_btn;
            }
        }
    }
    .tips_box{
        .content_spacing;
        margin: 20px 50px;
        font-size: 10px;
    }
</style>
